<div class="bd-content">
    <h1 class="bd-title" id="content">制作主题</h1>
    <p class="bd-lead">使用我们新的内置 Sass 变量自定义 Bootstrap 4，以获得全局样式设置，以便于主题和组件更改。</p>

    <h2 id="introduction">导览</h2>

    <p>在Bootstrap 3中，主题主要由LESS中的变量覆盖，自定义CSS和 <code class="highlighter-rouge">dist</code> 文件中包含的单独主题样式表驱动。 通过一些努力，可以在不触及核心文件的情况下完全重新设计 Bootstrap 3 的外观。 Bootstrap 4 提供了一种熟悉但略有不同的方法。</p>

    <p>现在，主题是由 Sass 变量，Sass 映射和自定义 CSS 完成的。 没有专门的主题样式表; 相反，你可以启用内置主题来添加渐变，阴影等。</p>

    <h2 id="sass">Sass</h2>

    <p>使用我们的源Sass文件来利用变量，映射，混合等。</p>

    <h3 id="file-structure">文件结构</h3>

    <p>尽可能避免修改 Bootstrap 的核心文件。 对于 Sass，这意味着创建自己的样式表，导入 Bootstrap ，以便你可以修改和扩展它。 假设你正在使用像 npm 这样的包管理器，那么你将拥有如下所示的文件结构：</p>

    <figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss</code></pre></figure>

    <p>如果你已经下载了我们的源文件并且没有使用包管理器，那么你将需要手动设置类似于该结构的内容，从而使 Bootstrap 的源文件与你自己的源文件分开。</p>

    <figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss</code></pre></figure>

    <h3 id="importing">Importing</h3>

    <p>在 <code class="highlighter-rouge">custom.scss</code> 中, 你将导入Bootstrap的源Sass文件。 你有两种选择：包括所有Bootstrap，或选择你需要的部件。 我们鼓励后者，但要注意我们的组件有一些要求和依赖。 你还需要为我们的插件添加一些JavaScript。</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
<span class="c1">// Option A: Include all of Bootstrap</span>

<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
<span class="c1">// Option B: Include parts of Bootstrap</span>

<span class="c1">// Required</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/mixins"</span><span class="p">;</span>

<span class="c1">// Optional</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/type"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/images"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/code"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/grid"</span><span class="p">;</span></code></pre></figure>

    <p>有了这个设置，你就可以开始修改 custom.scss 中的任何 Sass 变量和映射。 你也可以根据需要在 //Optional 部分下添加部分 Bootstrap 。 我们建议使用 bootstrap.scss 文件中的完整导入堆栈作为起点。</p>

    <h3 id="variable-defaults">变量默认值</h3>

    <p>Bootstrap 4中的每个 Sass 变量都包含 <code class="highlighter-rouge">!default</code> 志，允许你在不修改 Bootstrap 源代码的情况下覆盖自己Sass中变量的默认值。 根据需要复制和粘贴变量，修改它们的值，并删除 <code class="highlighter-rouge">!default</code> 标志。 如果已经分配了变量，则不会通过 Bootstrap 中的默认值重新分配该变量。</p>

    <p>你将在 <code class="highlighter-rouge">scss/_variables.scss</code> 中找到Bootstrap变量的完整列表。</p>

    <p>同一Sass文件中的变量覆盖可以在默认变量之前或之后。 但是，当覆盖Sass文件时，必须在导入Bootstrap的Sass文件之前进行覆盖。</p>

    <p>这是一个更改 <code class="highlighter-rouge">background-color</code> 和 <code class="highlighter-rouge">color</code> 的示例 通过npm导入和编译Bootstrap时 <code class="highlighter-rouge">&lt;body&gt;</code> :</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Your variable overrides</span>
<span class="nv">$body-bg</span><span class="p">:</span> <span class="mh">#000</span><span class="p">;</span>
<span class="nv">$body-color</span><span class="p">:</span> <span class="mh">#111</span><span class="p">;</span>

<span class="c1">// Bootstrap and its default variables</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>

    <p>根据需要对 Bootstrap 中的任何变量重设，包括下面的全局选项。</p>

    <h3 id="maps-and-loops">映射和循环</h3>

    <p>Bootstrap 4 包含一些 Sass 映射，键值对可以更容易地生成相关 CSS 系列。 我们使用Sass贴图作为颜色，网格断点等。 就像 Sass 变量一样，所有 Sass 映射都包含 <code class="highlighter-rouge">!default</code> 标志，可以覆盖和扩展。</p>

    <p>默认情况下，我们的一些 Sass 映射合并为空映射。 这样做是为了允许轻松扩展给定的 Sass 映射，但是以使从映射中<em>移除</em>项目稍微困难为代价。</p>

    <h4 id="modify-map">改变映射</h4>

    <p>修改我们的现有颜色 <code class="highlighter-rouge">$theme-colors</code> 映射, 将以下内容添加到自定义Sass文件中:</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
  <span class="s2">"primary"</span><span class="o">:</span> <span class="mh">#0074d9</span><span class="o">,</span>
  <span class="s2">"danger"</span><span class="o">:</span> <span class="mh">#ff4136</span>
<span class="p">);</span></code></pre></figure>

    <h4 id="add-to-map">添加映射</h4>

    <p>添加新的颜色到 <code class="highlighter-rouge">$theme-colors</code>, 添加以下内容:</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
  <span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#900</span>
<span class="p">);</span></code></pre></figure>

    <h4 id="remove-from-map">移除映射</h4>

    <p>要从 <code class="highlighter-rouge">$theme-colors</code> 移除映射,或者其他的地方,使用 <code class="highlighter-rouge">map-remove</code>. 请注意，你必须在我们的包含内容和选项之间插入它:</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Required</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/mixins"</span><span class="p">;</span>

<span class="nv">$theme-colors</span><span class="p">:</span> <span class="nf">map-remove</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="s2">"info"</span><span class="o">,</span> <span class="s2">"light"</span><span class="o">,</span> <span class="s2">"dark"</span><span class="p">);</span>

<span class="c1">// Optional</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/root"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/type"</span><span class="p">;</span>
<span class="nc">...</span></code></pre></figure>

    <h4 id="required-keys">必须的键(key)</h4>

    <p>Bootstrap 假设 Sass 映射中存在一些特定的键，因为我们自己使用并扩展了这些键(key)。 在自定义包含的映射时，你可能会遇到使用特定 Sass映射键(key) 的错误。</p>

    <p>例如，我们使用来自 <code class="highlighter-rouge">$theme-colors</code> 的 <code class="highlighter-rouge">primary</code>, <code class="highlighter-rouge">success</code>, 和 <code class="highlighter-rouge">danger</code> 用于链接，按钮和表单状态。 替换这些键的值应该没有问题，但删除它们可能会导致 Sass 编译问题。 在这些情况下，你需要修改使用这些值的 Sass 代码。</p>

    <h3 id="functions">功能</h3>

    <p>Bootstrap 使用几个Sass功能，但只有一个子集适用于一般主题。 我们已经包含了三个从颜色映射中获取值的功能:</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@function</span> <span class="nf">color</span><span class="p">(</span><span class="nv">$key</span><span class="o">:</span> <span class="s2">"blue"</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">@return</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$colors</span><span class="o">,</span> <span class="nv">$key</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">@function</span> <span class="nf">theme-color</span><span class="p">(</span><span class="nv">$key</span><span class="o">:</span> <span class="s2">"primary"</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">@return</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="nv">$key</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">@function</span> <span class="nf">gray</span><span class="p">(</span><span class="nv">$key</span><span class="o">:</span> <span class="s2">"100"</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">@return</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$grays</span><span class="o">,</span> <span class="nv">$key</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>

    <p>这些功能允许你从Sass映射中选择一种颜色，就像你使用v3中的颜色变量一样。</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nf">gray</span><span class="p">(</span><span class="s2">"100"</span><span class="p">);</span>
  <span class="nl">background-color</span><span class="p">:</span> <span class="nf">theme-color</span><span class="p">(</span><span class="s2">"dark"</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>

    <p>我们还有另一个功能，用于从 <code class="highlighter-rouge">$theme-colors</code> 地图中获取特定<em>级别</em>颜色。 负值会减轻颜色，而较高值会变暗。</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@function</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color-name</span><span class="o">:</span> <span class="s2">"primary"</span><span class="o">,</span> <span class="nv">$level</span><span class="o">:</span> <span class="m">0</span><span class="p">)</span> <span class="p">{</span>
  <span class="nv">$color</span><span class="p">:</span> <span class="nf">theme-color</span><span class="p">(</span><span class="nv">$color-name</span><span class="p">);</span>
  <span class="nv">$color-base</span><span class="p">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$level</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">,</span> <span class="mh">#000</span><span class="o">,</span> <span class="mh">#fff</span><span class="p">);</span>
  <span class="nv">$level</span><span class="p">:</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$level</span><span class="p">);</span>

  <span class="k">@return</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$color-base</span><span class="o">,</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$level</span> <span class="o">*</span> <span class="nv">$theme-color-interval</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>

    <p>在实践中，你将调用该功能并传入两个参数：来自 <code class="highlighter-rouge">$theme-colors</code> (primary 或 danger) 和数字级别的颜色名。.</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="n">primary</span><span class="o">,</span> <span class="m">-10</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>

    <p>可以在将来添加其他功能或你自己的自定义 Sass 为其他 Sass 映射创建级别功能，如果你想要更详细，甚至可以添加通用功能。</p>

    <h3 id="color-contrast">颜色对比</h3>

    <p>我们在Bootstrap中包含的另一个功能是颜色对比功能， <code class="highlighter-rouge">color-yiq</code>. 它利用 <a href="https://en.wikipedia.org/wiki/YIQ">YIQ 颜色空间</a> 自动返回亮 (<code class="highlighter-rouge">#fff</code>) 或暗 (<code class="highlighter-rouge">#111</code>) 基于指定的基色对比色。 此函数对于生成多个类的mixins或循环特别有用。</p>

    <p>例如，要从我们的 <code class="highlighter-rouge">$theme-colors</code> 映射生成颜色样本</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
  <span class="nc">.swatch-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
    <span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="nv">$value</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span></code></pre></figure>

    <p>它还可用于一次性对比度需求:</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="mh">#000</span><span class="p">);</span> <span class="c1">// returns `color: #fff`</span>
<span class="p">}</span></code></pre></figure>

    <p>你还可以使用我们的颜色映射功能指定基色：</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="nf">theme-color</span><span class="p">(</span><span class="s2">"dark"</span><span class="p">));</span> <span class="c1">// returns `color: #fff`</span>
<span class="p">}</span></code></pre></figure>

    <h2 id="sass-options">Sass options</h2>

    <p>使用我们的内置自定义变量文件自定义 Bootstrap 4，并使用新的 <code class="highlighter-rouge">$enable-*</code> Sass 变量轻松切换全局 CSS 首选项。 覆盖变量的值，并根据需要使用 <code class="highlighter-rouge">npm run test</code> 重新编译。</p>

    <p>你可以在 Bootstrap 的<code class="highlighter-rouge">scss/_variables.scss</code> 文件中找到并自定义关键全局选项的这些变量。</p>

    <table>
        <thead>
            <tr>
                <th>变量</th>
                <th>值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code class="highlighter-rouge">$spacer</code></td>
                <td><code class="highlighter-rouge">1rem</code> (default), or any value &gt; 0</td>
                <td>指定默认的spacer值，以编程方式生成spacer工具。</td>
            </tr>
            <tr>
                <td><code class="highlighter-rouge">$enable-rounded</code></td>
                <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
                <td>在各种组件上启用预定义的border-radius样式。</td>
            </tr>
            <tr>
                <td><code class="highlighter-rouge">$enable-shadows</code></td>
                <td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
                <td>在各种组件上启用预定义的 <code class="highlighter-rouge">box-shadow</code> 样式.</td>
            </tr>
            <tr>
                <td><code class="highlighter-rouge">$enable-gradients</code></td>
                <td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
                <td>通过各种组件上的 <code class="highlighter-rouge">background-image</code> 样式启用预定义渐变。</td>
            </tr>
            <tr>
                <td><code class="highlighter-rouge">$enable-transitions</code></td>
                <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
                <td>在各种组件上启用预定义的 <code class="highlighter-rouge">transition</code> 。</td>
            </tr>
            <tr>
                <td><code class="highlighter-rouge">$enable-hover-media-query</code></td>
                <td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
                <td><strong>已弃用</strong></td>
            </tr>
            <tr>
                <td><code class="highlighter-rouge">$enable-grid-classes</code></td>
                <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
                <td>允许为网格系统生成CSS类（例如， <code class="highlighter-rouge">.container</code>, <code class="highlighter-rouge">.row</code>, <code class="highlighter-rouge">.col-md-1</code>, 等等)。</td>
            </tr>
            <tr>
                <td><code class="highlighter-rouge">$enable-caret</code></td>
                <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
                <td>在 <code class="highlighter-rouge">.dropdown-toggle</code> 上启用伪元素插入符号。</td>
            </tr>
            <tr>
                <td><code class="highlighter-rouge">$enable-print-styles</code></td>
                <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
                <td>启用优化打印表现的样式。</td>
            </tr>
        </tbody>
    </table>

    <h2 id="color">颜色</h2>

    <p>Bootstrap 的许多组件和工具都是通过 Sass 映射中定义的一系列颜色构建的。 此映射可以在 Sass 中循环以快速生成一系列规则集。</p>

    <h3 id="all-colors">全部颜色</h3>

    <p>Bootstrap 4中的所有颜色都可用作Sass变量和<code class="highlighter-rouge">scss/_variables.scss</code> 文件中的Sass映射。 这将在后续的次要版本中进行扩展，以添加其他阴影，就像我们已经包含的<a href="#grays">灰度调色板</a>一样。</p>

    <div class="row">


        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-blue">Blue</div>
        </div>



        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-indigo">Indigo</div>
        </div>



        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-purple">Purple</div>
        </div>



        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-pink">Pink</div>
        </div>



        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-red">Red</div>
        </div>



        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-orange">Orange</div>
        </div>



        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-yellow">Yellow</div>
        </div>



        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-green">Green</div>
        </div>



        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-teal">Teal</div>
        </div>



        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-cyan">Cyan</div>
        </div>








    </div>

    <p>以下是你在 Sass 中使用这些内容的方法:</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// With variable</span>
<span class="nc">.alpha</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nv">$purple</span><span class="p">;</span> <span class="p">}</span>

<span class="c1">// From the Sass map with our `color()` function</span>
<span class="nc">.beta</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nf">color</span><span class="p">(</span><span class="s2">"purple"</span><span class="p">);</span> <span class="p">}</span></code></pre></figure>

    <p>颜色工具类也可用于设置颜色和背景颜色。</p>

    <div class="bd-callout bd-callout-info">
        <p>将来，我们的目标是为每种颜色的阴影提供 Sass 映射和变量，就像我们使用下面的灰度颜色一样。</p>
    </div>

    <h3 id="theme-colors">主题颜色</h3>

    <p>我们使用所有颜色的子集来创建较小的调色板以生成颜色方案，也可以在Bootstrap的 <code class="highlighter-rouge">scss/_variables.scss</code> 文件中作为Sass变量和Sass映射使用。</p>

    <div class="row">

        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-primary">Primary</div>
        </div>

        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-secondary">Secondary</div>
        </div>

        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-success">Success</div>
        </div>

        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-danger">Danger</div>
        </div>

        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-warning">Warning</div>
        </div>

        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-info">Info</div>
        </div>

        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-light">Light</div>
        </div>

        <div class="col-md-4">
            <div class="p-3 mb-3 swatch-dark">Dark</div>
        </div>

    </div>

    <h3 id="grays">灰度</h3>

    <p>一组广泛的灰色变量和 <code class="highlighter-rouge">scss/_variables.scss</code> 中的 Sass 映射，用于整个项目中一致的灰色阴影。</p>

    <div class="row mb-3">
        <div class="col-md-4">

            <div class="p-3 swatch-100">100</div>

            <div class="p-3 swatch-200">200</div>

            <div class="p-3 swatch-300">300</div>

            <div class="p-3 swatch-400">400</div>

            <div class="p-3 swatch-500">500</div>

            <div class="p-3 swatch-600">600</div>

            <div class="p-3 swatch-700">700</div>

            <div class="p-3 swatch-800">800</div>

            <div class="p-3 swatch-900">900</div>

        </div>
    </div>

    <p>在 <code class="highlighter-rouge">scss/_variables.scss</code>中，你将找到 Bootstrap 的颜色变量和 Sass 映射。 以下是 <code class="highlighter-rouge">$colors</code> Sass 映射的示例：</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$colors</span><span class="p">:</span> <span class="p">(</span>
  <span class="s2">"blue"</span><span class="o">:</span> <span class="nv">$blue</span><span class="o">,</span>
  <span class="s2">"indigo"</span><span class="o">:</span> <span class="nv">$indigo</span><span class="o">,</span>
  <span class="s2">"purple"</span><span class="o">:</span> <span class="nv">$purple</span><span class="o">,</span>
  <span class="s2">"pink"</span><span class="o">:</span> <span class="nv">$pink</span><span class="o">,</span>
  <span class="s2">"red"</span><span class="o">:</span> <span class="nv">$red</span><span class="o">,</span>
  <span class="s2">"orange"</span><span class="o">:</span> <span class="nv">$orange</span><span class="o">,</span>
  <span class="s2">"yellow"</span><span class="o">:</span> <span class="nv">$yellow</span><span class="o">,</span>
  <span class="s2">"green"</span><span class="o">:</span> <span class="nv">$green</span><span class="o">,</span>
  <span class="s2">"teal"</span><span class="o">:</span> <span class="nv">$teal</span><span class="o">,</span>
  <span class="s2">"cyan"</span><span class="o">:</span> <span class="nv">$cyan</span><span class="o">,</span>
  <span class="s2">"white"</span><span class="o">:</span> <span class="nv">$white</span><span class="o">,</span>
  <span class="s2">"gray"</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="o">,</span>
  <span class="s2">"gray-dark"</span><span class="o">:</span> <span class="nv">$gray-800</span>
<span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>

    <p>添加，删除或修改映射中的值，以更新它们在许多其他组件中的使用方式。 不幸的是，此时并非<em>每个</em>组件都使用此 Sass 映射。 未来的更新将努力改进这一点。 在此之前，计划使用<code class="highlighter-rouge">${color}</code> 变量和此 Sass 映射。</p>

    <h2 id="components">组件</h2>

    <p>Bootstrap 的许多组件和工具都是使用 <code class="highlighter-rouge">@each</code> 循环构建的，这些循环遍历 Sass 映射。 这对于通过我们的 <code class="highlighter-rouge">$theme-colors</code> 生成组件的变体以及为每个断点创建响应变体特别有用。 当你自定义这些 Sass 映射并重新编译时，你将自动看到这些循环中反映的更改。</p>

    <h3 id="modifiers">修饰符</h3>

    <p>Bootstrap 的许多组件都是使用 base-modifier 类方法构建的。 这意味着大部分样式包含在基类中（例如，<code class="highlighter-rouge">.btn</code>) ，而样式变体仅限于修饰符类（例如， <code class="highlighter-rouge">.btn-danger</code>)。 这些修饰符类是从 <code class="highlighter-rouge">$theme-colors</code> 映射构建的，用于自定义修饰符类的数量和名称。</p>

    <p>以下是我们如何遍历 <code class="highlighter-rouge">$theme-colors</code> 映射以生成 <code class="highlighter-rouge">.alert</code> 的修饰符的两个示例。 组件和我们的所有 <code class="highlighter-rouge">.bg-*</code> 背景工具。</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Generate alert modifier classes</span>
<span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
  <span class="nc">.alert-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
    <span class="k">@include</span> <span class="nd">alert-variant</span><span class="p">(</span><span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">-10</span><span class="p">)</span><span class="o">,</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">-9</span><span class="p">)</span><span class="o">,</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">6</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Generate `.bg-*` color utilities</span>
<span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">bg-variant</span><span class="p">(</span><span class="s1">'.bg-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span><span class="s1">'</span><span class="o">,</span> <span class="nv">$value</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>

    <h3 id="responsive">响应式设计</h3>

    <p>这些 Sass 循环也不仅限于颜色映射。 你还可以生成组件或工具的响应式变体。 以我们的响应式文本对齐工具为例，我们为 <code class="highlighter-rouge">@each</code> Sass 混合 <code class="highlighter-rouge">$grid-breakpoints</code> 循环 包含媒体查询的映射。</p>

    <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$breakpoint</span> <span class="n">in</span> <span class="nf">map-keys</span><span class="p">(</span><span class="nv">$grid-breakpoints</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="p">)</span> <span class="p">{</span>
    <span class="nv">$infix</span><span class="p">:</span> <span class="nf">breakpoint-infix</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="o">,</span> <span class="nv">$grid-breakpoints</span><span class="p">);</span>

    <span class="nc">.text</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-left</span>   <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
    <span class="nc">.text</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-right</span>  <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">right</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
    <span class="nc">.text</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-center</span> <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span></code></pre></figure>

    <p>如果你需要修改 <code class="highlighter-rouge">$grid-breakpoints</code>，你的更改将适用于迭代该映射的所有循环。</p>

    <h2 id="css-variables">CSS 变量</h2>

    <p>Bootstrap 4在其编译的CSS中包含大约24个 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS自定义属性（变量）</a> 在浏览器的Inspector，代码沙箱或一般原型设计中工作时，这些可以轻松访问常用值，如主题颜色，断点和主要字体堆栈。</p>

    <h3 id="available-variables">可用变量</h3>

    <p>以下是我们包含的变量（请注意 <code class="highlighter-rouge">:root</code> 是必需的）。 它们位于我们的 <code class="highlighter-rouge">_root.scss</code> 文件中。</p>

    <figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nd">:root</span> <span class="p">{</span>
  <span class="py">--blue</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span>
  <span class="py">--indigo</span><span class="p">:</span> <span class="m">#6610f2</span><span class="p">;</span>
  <span class="py">--purple</span><span class="p">:</span> <span class="m">#6f42c1</span><span class="p">;</span>
  <span class="py">--pink</span><span class="p">:</span> <span class="m">#e83e8c</span><span class="p">;</span>
  <span class="py">--red</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span>
  <span class="py">--orange</span><span class="p">:</span> <span class="m">#fd7e14</span><span class="p">;</span>
  <span class="py">--yellow</span><span class="p">:</span> <span class="m">#ffc107</span><span class="p">;</span>
  <span class="py">--green</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span>
  <span class="py">--teal</span><span class="p">:</span> <span class="m">#20c997</span><span class="p">;</span>
  <span class="py">--cyan</span><span class="p">:</span> <span class="m">#17a2b8</span><span class="p">;</span>
  <span class="py">--white</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
  <span class="py">--gray</span><span class="p">:</span> <span class="m">#6c757d</span><span class="p">;</span>
  <span class="py">--gray-dark</span><span class="p">:</span> <span class="m">#343a40</span><span class="p">;</span>
  <span class="py">--primary</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span>
  <span class="py">--secondary</span><span class="p">:</span> <span class="m">#6c757d</span><span class="p">;</span>
  <span class="py">--success</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span>
  <span class="py">--info</span><span class="p">:</span> <span class="m">#17a2b8</span><span class="p">;</span>
  <span class="py">--warning</span><span class="p">:</span> <span class="m">#ffc107</span><span class="p">;</span>
  <span class="py">--danger</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span>
  <span class="py">--light</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
  <span class="py">--dark</span><span class="p">:</span> <span class="m">#343a40</span><span class="p">;</span>
  <span class="py">--breakpoint-xs</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="py">--breakpoint-sm</span><span class="p">:</span> <span class="m">576px</span><span class="p">;</span>
  <span class="py">--breakpoint-md</span><span class="p">:</span> <span class="m">768px</span><span class="p">;</span>
  <span class="py">--breakpoint-lg</span><span class="p">:</span> <span class="m">992px</span><span class="p">;</span>
  <span class="py">--breakpoint-xl</span><span class="p">:</span> <span class="m">1200px</span><span class="p">;</span>
  <span class="py">--font-family-sans-serif</span><span class="p">:</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s1">"Segoe UI"</span><span class="p">,</span> <span class="n">Roboto</span><span class="p">,</span> <span class="s1">"Helvetica Neue"</span><span class="p">,</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">,</span> <span class="s1">"Apple Color Emoji"</span><span class="p">,</span> <span class="s1">"Segoe UI Emoji"</span><span class="p">,</span> <span class="s1">"Segoe UI Symbol"</span><span class="p">;</span>
  <span class="py">--font-family-monospace</span><span class="p">:</span> <span class="n">SFMono-Regular</span><span class="p">,</span> <span class="n">Menlo</span><span class="p">,</span> <span class="n">Monaco</span><span class="p">,</span> <span class="n">Consolas</span><span class="p">,</span> <span class="s1">"Liberation Mono"</span><span class="p">,</span> <span class="s1">"Courier New"</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>

    <h3 id="examples">例子</h3>

    <p>CSS 变量为 Sass 的变量提供了类似的灵活性，但在提供给浏览器之前无需编译。 例如，这里我们用 CSS 变量来重置页面的字体和链接样式。</p>

    <figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
  <span class="nl">font</span><span class="p">:</span> <span class="m">1rem</span><span class="p">/</span><span class="m">1.5</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-family-sans-serif</span><span class="p">);</span>
<span class="p">}</span>
<span class="nt">a</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--blue</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>

    <h3 id="breakpoint-variables">断点变量</h3>

    <p>虽然我们最初在CSS变量中包含了断点（例如 <code class="highlighter-rouge">--breakpoint-md</code>), 不过<strong>媒体查询中不支持这些</strong>, 但它们是 仍然可以在媒体查询中的规则集中使用。这些断点变量保留在已编译的CSS中，以便向后兼容，因为它们可以被JavaScript使用。 <a href="https://www.w3.org/TR/css-variables-1/#using-variables">在规范中了解详情。</a></p>

    <p>这里有一个 <strong>不受支持</strong>的例子：</p>

    <figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--breakpoint-sm</span><span class="p">))</span> <span class="p">{</span>
  <span class="o">...</span>
<span class="p">}</span></code></pre></figure>

    <p>这里是 <strong>可以使用</strong>的例子：</p>

    <figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="p">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span>
  <span class="nc">.custom-element</span> <span class="p">{</span>
    <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--primary</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span></code></pre></figure>
</div>
